<template>
  <div class="message-box" v-show="isShowMessageBox">
    <div class="mask" @click="cancel"></div>
    <template v-if="mode==1">
      <erweima @close='cancel'></erweima>
    </template>
    <template v-else>
    <div class="message-content" v-if="title">
      <h3  style="margin-top:30px;margin-bottom:12px;text-align:center;font-size: 24px;color: #000000;font-weight: 400;line-height: 33px;">{{ title }}</h3>
      <p style="margin-bottom:26px;text-align:center;font-size: 24px;color: #898989;font-weight: 400;line-height: 33px;">{{ content }}</p>
      <div>
        <input type="text" v-model="inputValue" v-if="isShowInput" ref="input" @keyup.enter="confirm">
      </div>
      <div class="btn-group">
        <button class="btn-default btn-cancel" @click="cancel" v-show="isShowCancelBtn">{{ cancelBtnText }}</button>
        <button class="btn-primary btn-confirm" @click="confirm" v-show="isShowConfimrBtn">{{ confirmBtnText }}</button>
      </div>
    </div>
    <div class="message-content" v-else>
      
      <p style="margin-top:58px;margin-bottom:43px;text-align:center;font-size: 24px;color: #000000;font-weight: 400;line-height: 33px;">{{ content }}</p>
      <div>
        <input type="text" v-model="inputValue" v-if="isShowInput" ref="input" @keyup.enter="confirm">
      </div>
      <div class="btn-group">
        <button class="btn-default btn-cancel" @click="cancel" v-show="isShowCancelBtn">{{ cancelBtnText }}</button>
        <button class="btn-primary btn-confirm" @click="confirm" v-show="isShowConfimrBtn">{{ confirmBtnText }}</button>
      </div>
    </div>
    </template>
  </div>
</template>
 
<script>
import erweima from './comp/erweima.vue'
  export default {
    components:{
      erweima
    },
    props: {
      mode:{
        type: String,
        default: ''
      },
      title: {
        type: String,
        default: ''
      },
      content: {
        type: String,
        default: '这是弹框内容'
      },
      isShowInput: false,
      inputValue: '',
      isShowCancelBtn: {
        type: Boolean,
        default: true
      },
      isShowConfimrBtn: {
        type: Boolean,
        default: true
      },
      cancelBtnText: {
        type: String,
        default: '取消'
      },
      confirmBtnText: {
        type: String,
        default: '确定'
      }
    },
    data () {
      return {
        isShowMessageBox: false,
        resolve: '',
        reject: '',
        promise: '' // 保存promise对象
      };
    },
    methods: {
      // 确定,将promise断定为resolve状态
      confirm: function () {
        this.isShowMessageBox = false;
        if (this.isShowInput) {
          this.resolve(this.inputValue);
        } else {
          this.resolve('confirm');
        }
        this.remove();
      },
      // 取消,将promise断定为reject状态
      cancel: function () {
        this.isShowMessageBox = false;
        this.reject('cancel');
        this.remove();
      },
      // 弹出messageBox,并创建promise对象
      showMsgBox: function () {
        this.isShowMessageBox = true;
        this.promise = new Promise((resolve, reject) => {
          this.resolve = resolve;
          this.reject = reject;
        });
        // 返回promise对象
        return this.promise;
      },
      remove: function () {
        setTimeout(() => {
          this.destroy();
        }, 300);
      },
      destroy: function () {
        this.$destroy();
        document.body.removeChild(this.$el);
      }
    }
  };
</script>
 
<style lang="less" scoped>
  .message-box {
    position: relative;
    .mask {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 50000;
      background: rgba(51,51,51,0.52);
    }
    .message-content {
      position: fixed;
      box-sizing: border-box;
      // padding: 1em;
      width: 432px;
      height: 216px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 0.4em;
      background: #fff;
      z-index: 50001;
      color: #333333;
      box-sizing: border-box;
      .title {
        font-size: 1.2em;
        font-weight: 600;
        margin-bottom: 1em;
      }
      .content {
        font-size: 1em;
        line-height: 2em;
        color: #555;
      }
      input {
        width: 100%;
        margin: 1em 0;
        background-color: #fff;
        border-radius: 0.4em;
        border: 1px solid #d8dce5;
        box-sizing: border-box;
        color: #5a5e66;
        display: inline-block;
        font-size: 14px;
        height: 3em;
        line-height: 1;
        outline: none;
        padding: 0 1em;
        &:focus {
          border-color: #2d8cf0;
        }
      }
      .btn-group {
        margin: 0 auto;
        margin-top: 1em;
        text-align: center;
        overflow: hidden;
        .btn-default {
          padding: 6px 36px;
          font-size: 21px;
          font-weight: 400;
          color: #64B6A8;
          border: 1px solid #64B6A8;
          border-radius: 37px 37px 37px 37px;
          cursor: pointer;
          background-color: #fff;
          outline: none;
 
          // &:hover {
          //   color: #64B6A8;
          //   border-color: #92ecdd;
          //   background-color: #befcf1;
          // }
        }
 
        .btn-primary {
          padding: 6px 36px;
          font-size: 21px;
          font-weight: 400;
          color: #FFFFFF;
          background: #64B6A8;
          border-radius: 37px 37px 37px 37px;
          cursor: pointer;
          outline: none;
 
          &:hover {
            opacity: .8;
          }
        }
        // .btn-confirm {
        //   margin-left: 33px;
        // }
        .btn-cancel{
          margin-right: 33px;
        }
      }
    }
  }
</style>